
  import * as echarts from '../../ec-canvas/echarts';
  import geoJson from './mapData.js';
  var chart = null;
  let myMap = null;
  let chartTwo = null;
  
  function randomData() {
    return Math.round(Math.random() * 1000);
  }
  
  
  function initChart(canvas, width, height) {
    chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    let option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['日本疫情', '韩国疫情', '台湾疫情', '大陆疫情', '菲律宾疫情']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '日本疫情',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '韩国疫情',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '台湾疫情',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '大陆疫情',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '菲律宾疫情',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
    }
    chart.setOption(option);
    return chart;
  }
  
  function initChart02(canvas, width, height) {
    chartTwo = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chartTwo);
    let option = {
      title: {
        text: '疫情折线图'
    },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
    };
    chartTwo.setOption(option);
    return chartTwo;
  }
  
  function initChartMap(canvas, width, height) {
    myMap = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(myMap);
    echarts.registerMap('china', geoJson); // 绘制中国地图
    const option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: "#FFF",
        padding: [
          10,  // 上
          15,  // 右
          8,   // 下
          15,  // 左
        ],
        extraCssText: 'box-shadow: 2px 2px 10px rgba(21, 126, 245, 0.35);',
        textStyle: {
          fontFamily: "'Microsoft YaHei', Arial, 'Avenir', Helvetica, sans-serif",
          color: '#005dff',
          fontSize: 12,
        },
        formatter: `{b} :  {c}确诊`
      },
      visualMap: {
        // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
        type: 'piecewise', // 类型为分段型
        top: "bottom",
        right: 10,
        splitNumber: 6,
        seriesIndex: [0],
        itemWidth: 20, // 每个图元的宽度
        itemGap: 2,    // 每两个图元之间的间隔距离，单位为px
        pieces: [      // 自定义每一段的范围，以及每一段的文字
          { gte: 10000, label: '10000人以上', color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
          { gte: 1000, lte: 9999, label: '1000-9999人', color: '#3375e4' },
          { gte: 500, lte: 999, label: '500-999人', color: '#6797ef' },
          { gte: 100, lte: 499, label: '100-499人', color: '#96b5ef' },
          { gte: 10, lte: 99, label: '10-99人', color: '#bacae8' },
          { lte: 9, label: '1-9人', color: '#d1d4da' }          // 不指定 min，表示 min 为无限大（-Infinity）。
        ],
        // inRange: {
        //   // 渐变颜色，从小到大（会出现显示不完全的情况！！！即出现白块，而且此处并没有设置白色）
        //   color: ['#d1d4da', '#bacae8', '#96b5ef', '#6797ef', '#3375e4', '#035cf5']
        // },
        textStyle: {
          color: '#737373'
        }
      },
      geo: [
        {
          // 地理坐标系组件
          map: "china",
          roam: false,      // 可以缩放和平移
          aspectScale: 0.8, // 比例
          layoutCenter: ["50%", "38%"], // position位置
          layoutSize: 360,              // 地图大小，保证了不超过 360x360 的区域
          label: {
            // 图形上的文本标签
            normal: {
              show: true,
              textStyle: {
                color: "rgba(0, 0, 0, 0.9)",
                fontSize: '8'
              }
            },
            emphasis: { // 高亮时样式
              color: "#333"
            }
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                }
              },
              label: {
                show: false // 隐藏文字
              }
            }
          ],
          itemStyle: {
            // 图形上的地图区域
            normal: {
              borderColor: "rgba(0,0,0,0.2)",
              areaColor: "#005dff"
            },
            emphasis: {
              // 高亮时
              areaColor: "#99CC33",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 10,
              borderWidth: 0,
              shadowColor: "rgba(0, 93, 255, 0.2)"
            }
          }
        }
      ],
      series: [
        {
          type: 'map',
          mapType: 'china',
          geoIndex: 0,
          roam: false, // 鼠标是否可以缩放
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { name: '北京', value: randomData() },
            { name: '天津', value: randomData() },
            { name: '上海', value: randomData() },
            { name: '重庆', value: randomData() },
            { name: '河北', value: randomData() },
            { name: '河南', value: randomData() },
            { name: '云南', value: randomData() },
            { name: '辽宁', value: randomData() },
            { name: '黑龙江', value: randomData() },
            { name: '湖南', value: randomData() },
            { name: '安徽', value: randomData() },
            { name: '山东', value: randomData() },
            { name: '新疆', value: randomData() },
            { name: '江苏', value: randomData() },
            { name: '浙江', value: randomData() },
            { name: '江西', value: randomData() },
            { name: '湖北', value: randomData() },
            { name: '广西', value: randomData() },
            { name: '甘肃', value: randomData() },
            { name: '山西', value: randomData() },
            { name: '内蒙古', value: randomData() },
            { name: '陕西', value: randomData() },
            { name: '吉林', value: randomData() },
            { name: '福建', value: randomData() },
            { name: '贵州', value: randomData() },
            { name: '广东', value: randomData() },
            { name: '青海', value: randomData() },
            { name: '西藏', value: randomData() },
            { name: '四川', value: randomData() },
            { name: '宁夏', value: randomData() },
            { name: '海南', value: randomData() },
            { name: '台湾', value: randomData() },
            { name: '香港', value: randomData() },
            { name: '澳门', value: randomData() }
          ]
        }]
    };
  
    myMap.setOption(option);
    return myMap
  }
  
  Page({
     //回到顶部
    // 获取滚动条当前位置
    onPageScroll: function (e) {
      console.log(e)
      if (e.scrollTop > 100) {
        this.setData({
          floorstatus: true
        });
      } else {
        this.setData({
          floorstatus: false
        });
      }
    },
  
    //回到顶部
    goTop: function (e) {  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 0
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    },
    goglobal: function (e) {  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 3300
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    },
    gonews: function (e) {  // 一键回到顶部
      if (wx.pageScrollTo) {
        wx.pageScrollTo({
          scrollTop: 4180
        })
      } else {
        wx.showModal({
          title: '提示',
          content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
      }
    },
    /**
     * 页面的初始数据
     */
    data: {
      js:'',
      news:'',
      news1:'',
      currentNum:0,
      boolean:'false'
     },
     EventHandle: function(){
      var bol = this.data.boolean;
      this.setData({
        boolean: !bol
      })
    },
    changeNum(event){
      var num=event.currentTarget.dataset.id;
      var bol = this.data.boolean;
      this.setData({
        boolean: !bol
      })
      console.log(num);
      this.setData({
        currentNum:num
      })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var _this=this
      wx.request({
        url: 'https://lab.isaaclin.cn/nCoV/api/overall?currentConfirmedCount(Incr)',
        success(res){
          console.log(res);
          _this.setData({
            js:res.data.results
          })
        }
      })
      var __this=this
      wx.request({
        url: 'https://lab.isaaclin.cn/nCoV/api/news?page=1&num=10',
        header:{"authoration":"apicode",
          "apicode":"2acb81cf48e04584aec7e4e02bf5c1d5"},
        success(res){
          console.log(res);
          __this.setData({
            news1:res.data.results
          })
        }
      })
      var ___this=this
      wx.request({
        url: 'https://api.yonyoucloud.com/apis/dst/ncov/identifyRumor',
        header:{"authoration":"apicode","apicode":"2acb81cf48e04584aec7e4e02bf5c1d5"},
        success(res){
          console.log(res);
          ___this.setData({
            news:res.data.newslist
          })
        }
      })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    },
    /**
     * 页面的初始数据
     */
    data: {
      ec01: {
        onInit: initChart
      },
      ec02: {
        onInit: initChart02
      },
      ecMap: {
        onInit: initChartMap
      },
    },
    getOutList: function () {
      wx.showLoading({
        title: '正加载喔...'
      })
      /**
       * 本地测试折线图
       */
      console.log('diagJson------', diagJson)
      // allList = { ...diagJson.data }
      this.setData({
        allList: diagJson.data
      },() => {
        // 回调函数      
        this.setData({
          updateMinutes: changeMiu(this.data.allList.date) // 更新时间
        })
        // 设置折线图数据
        changeLine(this.data.allList.history)      
        // 设置地图数据
        changeMap(this.data.allList.area)
        wx.hideLoading()
      })
  },
  })
  